<template>
  <view class="members">
    <view class="search-content">
      <view class="left-content" @click="toSearchPlaceholder()">
        <view class="icon">
          <image src="@/static/img/search.png"></image>
        </view>
        <view class="placeholder">
          <swiper class="swiper" :style="{ height: styleHeight + 'px' }"
                  :autoplay-disable-on-interaction="false"
                  :indicator-dots="indicatorDots"
                  indicator-color="" indicator-active-color="" circular :autoplay="autoplay"
                  :vertical='true'
                  :interval="interval"
                  @change="changeSwiper">
            <!--        && playState == 'play'-->
            <swiper-item class="image-wrapper" v-for="(item, index) in searchData" :key="index">
              {{ item.name }}
            </swiper-item>
          </swiper>
        </view>
      </view>
      <view class="right-search"  @click="toSearch()">搜索</view>
    </view>
    <view style="padding-bottom: 20rpx;background: #fafafa;"></view>
  </view>
</template>

<script>
export default {
  props:{
    searchData:{
      type:Array,
      default:[]
    }
  },
  data() {
    return {
      autoplay:true,
      interval: 5000,
      duration: 800,
      indicatorDots: false,
      styleHeight:18,
      vertical:'vertical',
      current:0
    };
  },
  computed:{
  },
  created() {
  },
  methods:{
    changeSwiper(e){
      this.current = e.detail.current
    },
    toSearch(){
      uni.navigateTo({
        url: `/pages/client/index/searchlist?searchValue=${this.searchData[this.current].name}&searchId=${this.searchData[this.current].id}`,
      });
    },
    toSearchPlaceholder(){
      uni.navigateTo({
        url: `/pages/client/index/searchlist?searchValuePlaceholder=${this.searchData[this.current].name}`,
      });
    }
  }
};
</script>

<style lang="scss">

// 搜索样式
.members {
  padding: 0 20rpx 20rpx;
  background: #fafafa;
  border-radius:10rpx;
}
.search-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:10rpx 20rpx;
  background: #ffffff;
  .left-content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    .icon{
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .placeholder{
      width: 95%;
      color: #333333;
      ::v-deep .uni-swiper-slide-frame{
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      ::v-deep .image-wrapper{
        //width: 500px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .right-search{
    margin: 10rpx 0 ;
    padding: 0 20rpx;
    border-left: 2rpx solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color:$uni-color-primary;
  }

}
.swiper{
  width: 100%;
}
</style>
